<!-- 商品图片 -->
<template>
  <div v-if="! photolist.length==0">
      <img  v-for="item in photolist" :key="item" :src="item" alt="" @load="imgload" />
  </div>
</template>

<script>
export default {
  name:"photo",
  data () {
      return {
            count:0,
            imglength:this.photolist.length    
      }
  },
  props: {
      //这是一个对象类型
     photolist:{
          type:Array,
          default(){
               return {}
          }
     }
  },
  methods: {
    // img标签上的@load方法是图片加载就会调用的 只能阻止发射多少次 或者刷新几次
      imgload(){
          this.imglength=this.photolist.length
          //第二种防止一直发射函数的方法  当图片个数与变量count一样时 才发射
          if(++this.count==this.imglength){
               this.$emit("imgload")
          }
      },
  },
}

</script>
<style scoped>
img{ 
    width:100%
}

</style>